<template>
    <el-table :data="attendance" height="400" style="max-width: 100%; "
        :header-cell-style="{ background: ' #2c3e50', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
        <el-table-column fixed prop="employee_id" label="员工编号" width="150" />
        <el-table-column prop="name" label="员工名字" width="150" />
        <el-table-column label="考勤日期" width="150">
            <template #default="{ row }">
                <span>{{ dateFormatter(row.attendance_date) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="check_in_time" label="签到时间" width="150" />
        <el-table-column prop="check_out_time" label="签退时间" width="150" />
        <el-table-column prop="status" label="考勤状态" width="150" />
        <el-table-column label="记录创建时间" width="150">
            <template #default="{ row }">
                <span>{{ dateFormatter(row.created_at) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="记录更新时间" width="150">
            <template #default="{ row }">
                <span>{{ dateFormatter(row.updated_at) }}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="编辑" width="150">
            <template #default="scope">
                <!-- <el-button link type="primary" size="small" @click="editAttendance(scope.row)">编辑</el-button> -->
                <el-button link type="primary" size="small" @click="deleteAttendance(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


</template>
<script setup lang="ts">
import { defineProps, watch, defineEmits } from 'vue'
import { deleteData } from "../../../api/api"
const props = defineProps({
    attendance: {
        type: Array,
        default: () => []
    }
})
const emit = defineEmits<{ (event: string, value: object): void }>()
// //删除员工
const deleteAttendance = async (id: string) => {
    const res = await deleteData(`/attendance/${id}`, {});
    if (res.message != "考勤记录删除成功") return
    emit("refreshPage", {})

}
//编辑员工
const editAttendance = (attendance: object) => {
    emit("editAttendance", attendance)
}
// 格式化日期的函数
const dateFormatter = (cellValue: string) => {
    if (!cellValue) return "";
    const date = new Date(cellValue);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

</script>
<style scoped lang="scss">
.el-table {
    max-width: 100%;
}
</style>